<template>
  <div class="box-card">
    <el-card>
      <template #header>
        <h1>实名信息</h1>
      </template>
      <div class="info">
        <div class="tip">
          <el-icon>
            <InfoFilled/>
          </el-icon>
          12345
        </div>
        <!--用户认证成功后显示的内容-->
        <div class="table" v-if="userInfo?.authStatus === 1">
          <el-descriptions class="margin-top"
                           border
                           :column="1">
            <el-descriptions-item :width="30">
              <template #label>
                <div class="cell-item">
                  用户姓名
                </div>
              </template>
              {{ userInfo?.name }}
            </el-descriptions-item>
            <el-descriptions-item :width="30">
              <template #label>
                <div class="cell-item">
                  证件类型
                </div>
              </template>
              {{ userInfo?.certificatesType === '10' ? '身份证' : '户口本' }}
            </el-descriptions-item>
            <el-descriptions-item :width="30">
              <template #label>
                <div class="cell-item">
                  证件号码
                </div>
              </template>
              {{ userInfo?.certificatesNo }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!--用户未认证的结构-->
        <div class="form" v-else>
          <el-form style="width: 60%;margin: 20px auto"
                   label-width="80px"
                   ref="userParamsRef"
                   :model="userParams"
                   :rules="userParamsRules">
            <el-form-item label="用户姓名" prop="name">
              <el-input placeholder="请输入用户姓名" v-model="userParams.name"></el-input>
            </el-form-item>
            <el-form-item label="证件类型" prop="certificatesType">
              <el-select placeholder="请选择证件类型" v-model="userParams.certificatesType">
                <el-option label="身份证" value="10"></el-option>
                <el-option label="户口本" value="20"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="certificatesNo">
              <el-input placeholder="请输入证件号码" v-model="userParams.certificatesNo"></el-input>
            </el-form-item>
            <el-form-item label="上传证件" prop="certificatesUrl">
              <el-upload
                  ref="upload"
                  action="/api/oss/file/fileUpload?fileHost=userAuah"
                  :limit="1"
                  :on-exceed="exceedHandler"
                  :on-success="handleAvatarSuccess"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  list-type="picture-card">
                <el-icon>
                  <Plus/>
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <img w-full :src="userParams.certificatesUrl" alt="Preview Image"/>
              </el-dialog>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="resetForm">重写</el-button>
              <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import {InfoFilled, Plus} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {reqUserAuth, reqUserInfo} from "@/api/user";
import {UserInfo, UserParams} from "@/api/user/type.ts";
import {ElMessage, FormRules} from "element-plus";

//图片上传对象
const upload = ref()
//控制图片预览是否显示
const dialogVisible = ref(false)
//认证信息
const userInfo = ref<UserInfo>()
//认证form
const userParamsRef = ref()
//认证表单参数
const userParams = ref<UserParams>({
  name: '',
  certificatesType: '',
  certificatesNo: '',
  certificatesUrl: '',
})
onMounted(() => {
  getUserInfo()
})
const getUserInfo = async () => {
  const result = await reqUserInfo();
  console.log(result)
  userInfo.value = result.data

}
const validatorUrl = (rule: any, value: string, callback: any) => {
  console.log(rule,value)
  if(value.length>0){
    callback()
  }else{
    callback(new Error('请上传证件'))
  }
}
const userParamsRules = ref<FormRules<UserParams>>({
  name: [
    {required: true, message: '请输入用户姓名', trigger: 'blur'}
  ],
  certificatesType: [
    {required: true, message: '请选择证件类型', trigger: 'change'}
  ],
  certificatesNo: [
    {required: true, message: '请输入证件号码', trigger: 'blur'}
  ],
  certificatesUrl: [
    {
      required: true,
      validator: validatorUrl
    }
  ]
})

//图片超出数量回调
const exceedHandler = () => {
  ElMessage.error("图片只能上传一张")
}
//上传成功回调
const handleAvatarSuccess = (res: any) => {
  console.log(res.data)
  userParams.value.certificatesUrl = res.data
}
//预览图片回调
const handlePictureCardPreview = (file: any) => {
  dialogVisible.value = true
  userParams.value.certificatesUrl = file.url
}
//图片删除回调
const handleRemove = () => {
  userParams.value.certificatesUrl = ''
}
//重写回调
const resetForm = () => {
  //清空图片列表
  upload.value.clearFiles()
  //清空用户数据
  userParams.value = {
    name: '',
    certificatesType: '',
    certificatesNo: '',
    certificatesUrl: '',
  }
}
//提交认证信息
const submitForm = () => {
  userParamsRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        const result = await reqUserAuth(userParams.value);
        console.log(result)
        if (result.code === 200) {
          ElMessage.success("认证成功")
          await getUserInfo()
          return true
        } else {
          ElMessage.error(result.message)
          return false
        }
      } catch (e) {
        ElMessage.error("认证失败")
        return false
      }
    } else {
      return false;
    }
  })
}
</script>

<style scoped lang="scss">
.box-card {

  .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .tip {
      margin: 10px 0;
      color: $gray1;
    }

    .table {
      margin-top: 10px;
      width: 100%;
    }

    .form {
      width: 100%;
    }
  }
}
</style>
